<#include "/admin/_inc/_head.html"/>
<#include "/admin/_inc/_layout.html" />
<!DOCTYPE html>
<html lang="en">

<head>
    <@head />
    <link href="/assets/js/plugins/jquery-file-upload/css/jquery.fileupload-ui.css" rel="stylesheet">
</head>

<body>
    <@layout>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">

                <div class="ibox-content">
                    <ul class="nav nav-tabs" id="avatar-tab">
                        <li class="active">
                            <a data-toggle="tab" href="#tab-1" aria-expanded="true">基本设置</a>
                        </li>
                        <li id="webcam">
                            <a data-toggle="tab" href="#tab-2" aria-expanded="true">SEO设置</a>
                        </li>

                    </ul>
                    <div class="tab-content">

                        <div id="tab-1" class="tab-pane active">
                            <div class="panel-body">
                                <form id="form_basics" action="${ctx_admin}/site/update" method="post"
                                      class="form form-horizontal">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">网站名称</label>
                                        <div class="col-sm-10">
                                            <input type="hidden" name="siteId" value="${model.siteId}">
                                            <input type="text" id="siteName" name="siteName"
                                                   value="${model.siteName}" class="form-control" required=""
                                                   aria-required="true">
                                        </div>
                                    </div>

                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">网站URL</label>
                                        <div class="col-sm-10">
                                            <input type="text" name="siteUrl" value="${model.siteUrl}"
                                                   class="form-control" required="" aria-required="true">
                                        </div>
                                    </div>

                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">网站模板</label>
                                        <div class="col-sm-10">
                                            <input type="text" name="theme" value="${model.theme}"
                                                   class="form-control" required="" aria-required="true">
                                        </div>
                                    </div>

                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">网站LOGO</label>
                                        <div class="col-sm-10">
                                            <input type="text" id="logo" name="logo" value="${model.logo}"
                                                   class="form-control" required="" aria-required="true"
                                                   style="display: inline-block; width: auto; vertical-align: middle;">
                                            <span class="btn btn-primary fileinput-button" style="">
                                                <i class="fa fa-cloud-upload"></i>
                                                <span>上传图片</span>
                                                <input id="btn_logo" type="file" name="file" multiple>
                                            </span>
                                        </div>
                                    </div>

                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label"></label>
                                        <div class="col-sm-10">
                                            <button id="btn_basics" type="submit" class="btn btn-primary">确认
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>

                        </div>

                        <div id="tab-2" class="tab-pane">
                            <div class="panel-body">
                                <form id="form_seo" action="${ctx_admin}/site/update" method="post"
                                      class="form form-horizontal">

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label"> 标题：</label>
                                        <div class="col-sm-10">
                                            <input type="hidden" name="siteId" value="${model.siteId}">
                                            <input type="text" id="title" name="title"
                                                   placeholder="控制在25个字、50个字节以内" value="${model.title}"
                                                   class="form-control">
                                        </div>
                                    </div>

                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">
                                            关键词：</label>
                                        <div class="col-sm-10">
                                            <input type="text" id="keywords" name="keywords"
                                                   placeholder="5个左右,8汉字以内,用英文,隔开" value="${model.keywords}"
                                                   class="form-control">
                                        </div>
                                    </div>

                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">
                                            描述：</label>
                                        <div class="col-sm-10">
                                            <input type="text" id="description" name="description"
                                                   placeholder="空制在80个汉字，160个字符以内" value="${model.description}"
                                                   class="form-control">
                                        </div>
                                    </div>

                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label"></label>
                                        <div class="col-sm-10">
                                            <button id="btn_seo" type="submit" class="btn btn-primary">确认
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>

                        </div>


                    </div>


                </div>
            </div>
        </div>
    </div>


    </@layout>

<script src="/assets/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/assets/js/plugins/validate/messages_zh.min.js"></script>
<script src="/assets/js/plugins/jquery.form/jquery.form.js"></script>

<script src="/assets/js/plugins/jquery-file-upload/vendor/jquery.ui.widget.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="/assets/js/plugins/javascript-Load-Image/load-image.all.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-ui.js"></script>

<script type="text/javascript">
    $(function () {

        $('#btn_logo').fileupload({
            //inputid:'fileupload',//我要实例化哪个标签
            url: 'upload/logo',//服务端的地址
            dataType: 'json',//数据格式，ajax你懂的
            autoUpload: true,//是否选了文件就直接自动上传
            maxNumberOfFiles: 1,//最多同时上传几个文件
            maxFileSize: 5000000,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            //maxChunkSize:10000,//最大接收文件大小
            done: function (e, data) {//上传完了干嘛
                var res = data.result;
                if (res.success) {
                    $('#logo').val(res.url);
                    layer.msg(res.message, {icon: 1, time: 2000}, function () {
                    });
                } else {
                    layer.msg(res.message, {icon: 2, time: 3000}, function () {
                    });
                }

            },
            progressall: function (e, data) {//上传过程中，隔段时间就会调起的回调函数，这个东西，主要是用来返回进度的，你看里面的引用，没错，它带回来的参数值，只有total、loaded这种数字。

            },
            processalways: function (e, data) {
            }
        }).prop('disabled', !$.support.fileInput)
                .parent().addClass($.support.fileInput ? undefined : 'disabled');//不用猜了，就是看看是不是支持jqueryajax上传方式。就是上面说的那个frame东东。


        $("#form_basics").validate({
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    url: form.action,
                    dataType: 'json',
                    success: function (res) {
                        if (res.success) {
                            layer.msg(res.message, {icon: 1, time: 2000}, function () {
                                location.reload();
                            });
                        } else {
                            layer.msg(res.message, {icon: 2, time: 3000}, function () {
                            });
                        }
                    },
                    error: function () {
                        layer.msg('系统错误', {icon: 2, time: 3000}, function () {
                        });
                    }
                });
            }
        });

        $('#form_seo').validate({
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    url: form.action,
                    dataType: 'json',
                    success: function (res) {
                        if (res.success) {
                            layer.msg(res.message, {icon: 1, time: 2000}, function () {
                                location.reload();
                            });
                        } else {
                            layer.msg(res.message, {icon: 2, time: 3000}, function () {
                            });
                        }
                    },
                    error: function () {
                        layer.msg('系统错误', {icon: 2, time: 3000}, function () {
                        });
                    }
                });
            }
        });

    });
</script>

</body>

</html>